<template>
  <div class="container" v-bind:style="{height: windowHeight + 'px' }">
    <div class="redback"></div>
    <picker mode="date" @change="bindMonthChange" fields="month" :value="choosevalue" start="2019-01">
      <view class="picker choose">
        {{choosevalue}}
      </view>
    </picker>
    <div class="title">门店规划</div>
    <div class="plan_details flex">
      <div class="flex-item plan_shop" v-for="item in shoplist" :key="item.id" @tap="get_bumen_info(item.id)">
        <div class="money">￥{{item.amount}}</div>
        <div class="shopname">{{item.name}}</div>
      </div>
    </div>

    <div class="panelheader" v-if="show_bumen == 1"><span class="shu"></span>部门规划</div>
    <div class="partment" v-if="show_bumen == 1">
      <div class="partment_details" v-for="item in list_bumen" :key="item.departmentid" @tap="get_xiaozu_info(item.departmentid)">
        <div class="line1">
          <div class="names">{{item.name}}</div>
          <div class="right_arrow"></div>
        </div>
        <div class="line2 flex">
          <div class="words flex-item">规划业绩</div>
          <div class="money">￥{{item.amount}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import wx from 'wx'
import moment from 'moment'
import api from '@/utils/api'
import Toast from '@/utils/toast'
export default {
  data () {
    return {
      windowHeight: 0,
      year: moment().year(),
      month: moment().month() + 1,
      choosevalue: '',
      num: 1,
      choosedate: '点击选择日期',
      customername: '点击选择客户名称',
      customerShow: false,
      customerList: [],
      chooseGoodslist: [],
      chooseProjectlist: [],
      gusetid: '',
      arrivetime: '',
      focus: false,
      yearplan: '',
      shoplist: [],
      list_bumen: [],
      show_bumen: 0
    }
  },
  components: {
  },
  onLoad () {
    let that = this
    // 调用应用实例的方法获取全局数据
    // this.getUserInfo()
    wx.getSystemInfo({
      success (res) {
        that.windowHeight = res.windowHeight
      }
    })
    this.choosevalue = `${this.year}-${this.month}`;
    this.getlist();
  },
  onShow () {
  },
  computed: {
  },
  methods: {
    bindMonthChange (e) {
      this.year = e.mp.detail.value.split('-')[0]
      this.month = e.mp.detail.value.split('-')[1]
    },
    async getlist () {
      let starttime = Math.round(new Date(this.year, this.month - 1, 1).getTime() / 1000);
      let endtime = Math.round(new Date(this.year, this.month, 1).getTime() / 1000);
      let jsonshop = wx.getStorageSync('userInfo').jsonshop;
      const res = await api.getplaninfozongbu({ start_time: starttime, end_time: endtime, jsonshop: jsonshop });
      console.log(res)
      if (res.code === '100') {
        this.shoplist = res.data
      } else {
        Toast(res.msg);
      }
    },
    async get_bumen_info (departmentid) {
      let starttime = Math.round(new Date(this.year, this.month - 1, 1).getTime() / 1000);
      let endtime = Math.round(new Date(this.year, this.month, 1).getTime() / 1000);
      const res = await api.getplaninfodianzhang({ start_time: starttime, end_time: endtime, departmentid: departmentid });
      console.log(res)
      if (res.code === '100') {
        this.list_bumen = res.data;
        this.show_bumen = 1;
      } else {
        this.list_bumen = [];
        this.show_bumen = 0;
        Toast(res.msg);
      }
    },
    get_xiaozu_info (departmentid) {
      wx.navigateTo({
        url: '/pages/guest/groupplaning/groupplaning?departmentid=' + departmentid + '&year=' + this.year + '&month=' + this.month
      })
    },
    async onSubmit () {
    }
  }
}
</script>

<style scoped>
.container {
  background: rgba(153, 153, 153, 0.1) !important;
}
.redback {
  width: 100%;
  height: 60rpx;
  background: #ff4444;
}
.picker {
  position: absolute;
  top: 24rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 400rpx;
  height: 64rpx;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0rpx 6rpx 20rpx rgba(255, 68, 68, 0.2);
  opacity: 1;
  border-radius: 32rpx;
  color: rgba(51, 51, 51, 1);
  line-height: 64rpx;
  font-size: 28rpx;
  text-align: center;
}
.picker::after {
  content: '';
  position: absolute;
  top: 25rpx;
  right: 104rpx;
  width: 26rpx;
  height: 16rpx;
  background: url(http://mytimg.178mr.com/black_arrow3.png) no-repeat;
  background-size: 100%;
}
.title {
  background: #fff;
  height: 100rpx;
  width: 100%;
  line-height: 100rpx;
  padding-left: 32rpx;
  font-size: 32rpx;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
  border-bottom: 2rpx solid rgba(112, 112, 112, 0.1);
}
.plan_details {
  width: 100%;
  background: #fff;
  padding: 32rpx 0;
}
.plan_details .plan_shop {
  padding: 0 32rpx;
  border-right: 1rpx solid rgba(153, 153, 153, 0.1);
}
.plan_details .plan_shop:last-child {
  border-right: none;
}
.plan_details .plan_shop .money {
  font-size: 30rpx;
  font-weight: 400;
  line-height: 40rpx;
  color: rgba(255, 177, 153, 1);
  margin-bottom: 28rpx;
  width: 100%;
  text-align: center;
}
.plan_details .plan_shop .shopname {
  width: 100%;
  font-size: 28rpx;
  font-weight: 400;
  line-height: 38rpx;
  color: rgba(51, 51, 51, 1);
  text-align: center;
}
.partment {
  width: 100%;
  background: #fff;
  padding-left: 32rpx;
}
.partment_details {
  width: 100%;
  padding: 30rpx 0;
  padding-right: 30rpx;
  border-bottom: 1rpx solid rgba(153, 153, 153, 0.1);
  padding-bottom: 16rpx;
}
.partment_details .line1 {
  font-size: 28rpx;
  font-weight: 400;
  line-height: 38rpx;
  color: rgba(102, 102, 102, 1);
  margin-bottom: 8rpx;
  position: relative;
}
.partment_details .line2 {
  font-size: 24rpx;
  font-weight: 400;
  line-height: 32rpx;
  color: rgba(153, 153, 153, 1);
}
.partment_details .line2 .money {
  color: rgba(255, 177, 153, 1);
}
.right_arrow {
  position: absolute;
  top: 50%;
  right: 4rpx;
  width: 12rpx;
  height: 28rpx;
  background: url(http://mytimg.178mr.com/grey_arrow.png) no-repeat;
  background-size: 100%;
  transform: translateY(-50%);
}
.panelheader {
  width: 100%;
  background: #fff;
  font-size: 32rpx;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
  padding-left: 20rpx;
  margin-top: 18rpx;
  height: 80rpx;
  line-height: 80rpx;
  border-bottom: 1rpx solid rgba(153, 153, 153, 0.1);
}
.panelheader .shu {
  display: inline-block;
  width: 4rpx;
  height: 20rpx;
  background: rgba(255, 68, 68, 1);
  border-radius: 2rpx;
  margin-right: 12rpx;
}
</style>
